//@angular/core是一个npm的模块，定义了angular的核心功能
import { Component } from '@angular/core';

import { Http, Response } from '@angular/http';

//导入http请求的工具

//NavController就是用来管理和导航页面的一个controlle
//NavParams 这个是参数
import { NavController,NavParams } from 'ionic-angular';

//导入等待样式
import { LoadingController } from 'ionic-angular';

@Component({
    selector: 'page-web',
    templateUrl: 'web.html'
  })
//export关键词：将类暴露出去，以便其它的文件可以import到它。
//类的命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage, ContactPage等。
export class WebPage {
  // 接收数据用
  listData: Object;

  // 依赖注入
  constructor(public navCtrl: NavController, private http: Http,public loadingCtrl: LoadingController) {

  }

  ionViewDidLoad() {
        
        //加载数据中
        let loading = this.loadingCtrl.create({
            content: '加载数据中...'//数据加载中显示
        });
        //显示等待样式
        loading.present();

        // 网络请求
        this.http.request('http://jsonplaceholder.typicode.com/photos')
        .subscribe((res: Response) => {
            //查看返回的数据
            console.log(res);
            this.listData = res.json();

            //当数据加载完成后，影藏等待样式
            loading.dismiss();//显示多久消失
        });
    }
}